<template>
  <el-dialog
    :visible.sync="visible"
    title="密钥信息"
    :before-close="handleBeforeClose"
    :close-on-click-modal="false"
    :show-close="false"
  >
    <div class="key-container">
      <el-input
        v-model="quickLoginKey"
        type="text"
        readonly
        placeholder="暂无密钥信息"
        class="key-input"
      />
      <el-button
        type="primary"
        icon="el-icon-copy-document"
        class="copy-btn"
        @click="handleCopy"
      >
        复制密钥
      </el-button>
    </div>

    <div slot="footer">
      <el-button @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'KeyDialog',
  props: {
    // 外部传入的密钥
    quickLoginKey: {
      type: String,
      default: ''
    },
    // 控制弹框显示/隐藏
    visible: {
      type: Boolean,
      default: false
    }
  },
  created() {
    console.log('quickLoginKey', this.quickLoginKey)
  },
  methods: {
    // 复制密钥到剪贴板
    handleCopy() {
      if (!this.quickLoginKey) {
        this.$notify({ type: 'warning', message: '暂无密钥可复制' })
        return
      }

      // 创建临时文本框用于复制
      const textarea = document.createElement('textarea')
      textarea.value = process.env.VUE_APP_MOVE_APP_URL + '?q1=' + this.quickLoginKey
      document.body.appendChild(textarea)
      textarea.select()
      document.execCommand('copy')
      document.body.removeChild(textarea)

      this.$notify({ type: 'success', message: '密钥已复制到剪贴板' })
    },

    // 关闭弹框
    handleClose() {
      this.$emit('update:visible', false)
    },

    // 关闭前的钩子（支持异步关闭）
    handleBeforeClose(done) {
      // 这里可以根据实际需求添加异步操作
      // 示例：模拟异步操作（如保存状态）
      this.$confirm('确定要关闭密钥窗口吗？')
        .then(() => {
          done() // 确认关闭
          this.$emit('close') // 触发关闭事件
        })
        .catch(() => {
          // 取消关闭，不执行done()
        })
    }
  }
}
</script>

<style scoped>
.key-container {
  position: relative;
  margin-bottom: 20px;
}

.key-input {
  padding-right: 120px;
}

.copy-btn {
  position: absolute;
  right: 10px;
  top: 0;
  width: 110px;
}
</style>
